<template>
    <div class="login-container">
      <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" label-width="120px" class="login-loginForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input maxlength="5" v-model="loginForm.captcha" @keydown.enter="submitForm(loginFormRef)"/>
          <i  v-loading="captchaLoading" v-html="captcha" class="captcha" style="height: 39px; cursor: pointer;border: 1px solid #fff;" @click="getCaptcha"></i>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(loginFormRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
      <!-- <video data-v-73443695="" muted="muted" src="../../assets/video/RQPC5497.MP4" loop="loop" autoplay="autoplay"
        class="video"></video> -->
      <!-- <video data-v-73443695="" muted="muted" src="../../assets/video/BIIQ8363.MP4" loop="loop" autoplay="autoplay"
        class="video"></video> -->
      <video data-v-73443695="" muted="muted" src="../../assets/video/WFFD8107.MP4" loop="loop" autoplay="autoplay"
        class="video"></video>
  
  </template>
  
  <style scoped>
  
  :deep(svg){
      width: 100px;
      height: 40px;
  }
  .captcha{
    position: absolute;
    left: 120px;
  }
  video{
    position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
  }
  .login-container {
    position: fixed;
    right: calc(50% - 180px);
    top: 55%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, .2);
    padding: 100px 0 50px 0;
    z-index: 1;
  }
  .login-container .el-input {
      position: relative  !important;
      font-size: 14px  !important;
      display: inline-block;
      width: 100%  !important;
  
  }
  
  .login-container :deep(.el-input__inner){
    -webkit-appearance: none;
      background-color: #fff !important;
      background-image: none  !important;
      border-radius: 4px;
      color: #606266  !important;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      outline: 0;
      padding: 0 15px;
      box-sizing: border-box;
  }
  .login-container :deep(.el-form-item__label) {
    font-size: 16px;
    color: #606266;
  }
  
  .login-container .login-loginForm .el-input {
    width: 350px;
    padding-right: 50px;
  }
  
  .login-container .el-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    margin-left: 40px;
    width: 150px;
  
  }
  </style>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import * as api from "@/api/users"
  import useUser from '@/store/users.js';
  import { useRouter } from 'vue-router';
  import { ElLoading } from 'element-plus'
  console.log('所有的接口',api);
  
  import type { FormInstance, FormRules } from 'element-plus'
  let router=useRouter()
  const loginFormRef = ref()
  let userStore=useUser()
  const validateUsername = (rule, value, callback) => {
    let reg = /^[a-zA-Z0-9_-]{3,16}$/
  
    if (reg.test(value)) {
      callback()
    } else {
      callback('大小写字母,数字,下划线,中划线,3到16位')
    }
  
  
  }
  const validatePassword = (rule, value, callback) => {
    if (value) {
      callback()
    } else {
      callback('输入的密码不能为空')
    }
  }
  const validateCaptcha = (rule, value, callback) => {
    if (value) {
      callback()
    } else {
      callback('输入的验证码不能为空')
    }
  }
  
  
  const loginForm = reactive({
    username: '',
    password: '',
    captcha: '',
  })
  let captcha= ref('')
  
  const rules = reactive<FormRules>({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    captcha: [{ validator: validateCaptcha, trigger: 'blur' }],
  })
  
  const submitForm = (formEl) => {
  
    if (!formEl) return
    formEl.validate(async (valid) => {
  
      if (valid) {
  
       const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
  
       try {
        let captchaVerify=await validateCaptchaRemote(loginForm.captcha)
         
        if (captchaVerify) {
         let res=await api.loginApi(loginForm.username,loginForm.password)
  let {permission, token, userInfo}=res.data
  userStore.permission.value=permission
  userStore.userInfo.value=userInfo
  sessionStorage.setItem('tk',token)
  router.push('/')
        }
        loading.close()
       
       } catch (e) {
        console.log(e);
        loading.close()
       }
      
  
       
      } else {
        return false
      }
    })
  
  }
  
  const captchaLoading =ref(false)
  
  const getCaptcha= async()=>{
    captchaLoading.value=true
    try {
      let res=await api.getCaptchaApi()
      
      captcha=res.data.img
      captchaLoading.value=false
    } catch (e) {
      console.log(e);
      captchaLoading.value=false
    }
  }
  
  const validateCaptchaRemote=async (captcha)=>{
    // typeof captcha==='string' && captcha.toLowerCase()
    captcha = captcha.toLowerCase()
    try {
     let res=await api.verifyCaptchaApi(captcha)
  return res.data.state
    } catch (e) {
      console.log(e);
      return false
    }
  }
  
  
  
  onMounted(() => {
    getCaptcha()
  })
  
  </script>
    